<template>
  <div>
    <div class="main"
         v-loading="isloading"
         element-loading-text="Loading"
         element-loading-background="rgba(255, 255, 255, 0.4)">
      <keep-alive include="AllMV">
        <router-view />
      </keep-alive>
      <login class="login"
             v-show="$store.getters.getShowLogin" />
      <register class="register"
                v-show="$store.getters.getShowRegister" />
    </div>
  </div>
</template>

<script>
import Login from './user/Login.vue'
import Register from './user/Register'
export default {
  name: 'Main',
  components: {
    Login,
    Register
  },
  computed: {
    isloading () {
      return this.$store.state.isloading
    }
  }
}
</script>

<style scoped>
.main {
  width: 80%;
  height: calc(100vh - 59px - 55px);
  margin-left: 20%;
  position: relative;
}
.login,
.register {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
